<template>
  <!--自定义表单设计组件-->
  <div class="designer">
    <el-form :label-width="labelWidth+'px'">
      <div v-for="(element,index) in widgetList" :key="index" class="widget" style="overflow: hidden;">
        <el-alert v-if="element.componentName === 'ShuoMingField'" class="itemx" :active="element.active" :title="element.props.defaultValue" :closable="false" type="warning" />
        <el-form-item v-else :active="element.active" :required="element.props.required" class="item" :label="element.props.label">
          <el-input v-if="element.componentName === 'TextField'" v-model="element.props.defaultValue" :placeholder="element.props.placeholder" />
          <el-input v-if="element.componentName === 'TextAreaField'" v-model="element.props.defaultValue" type="textarea" :placeholder="element.props.placeholder" />
          <el-input-number v-if="element.componentName === 'NumberField'" v-model="element.props.defaultValue" :placeholder="element.props.placeholder" />
          <el-radio-group v-if="element.componentName === 'RadioField'" v-model="element.props.defaultValue">
            <el-radio v-for="(item,index) in element.props.options" :key="index" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
          <el-checkbox-group v-if="element.componentName === 'CheckboxField'" v-model="element.props.defaultValue">
            <el-checkbox v-for="(item,index) in element.props.options" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
          <el-date-picker v-if="element.componentName === 'DatePickerField'" v-model="element.props.defaultValue" :placeholder="element.props.placeholder" />
          <el-date-picker v-if="element.componentName === 'DateRangePickerField'" v-model="element.props.defaultValue" type="daterange" range-separator="-" :start-placeholder="element.props.startPlaceholder" :end-placeholder="element.props.endPlaceholder" />
          <el-date-picker v-if="element.componentName === 'DateTimePickerField'" v-model="element.props.defaultValue" type="datetime" :placeholder="element.props.placeholder" />
          <el-input v-if="element.componentName === 'TextCardField'" v-model="element.props.defaultValue" :placeholder="element.props.placeholder" />
          <el-input v-if="element.componentName === 'TextPhoneField'" v-model="element.props.defaultValue" :placeholder="element.props.placeholder" />
          <el-upload v-if="element.componentName === 'UploadFileField'" :file-list="element.props.defaultValue" action="https://myimage.mygctong.com/">
            <el-button type="primary" icon="el-icon-upload" plain>上传</el-button>
          </el-upload>
          <el-upload v-if="element.componentName === 'UploadImageField'" :file-list="element.props.defaultValue" action="https://myimage.mygctong.com/" list-type="picture-card">
            <i class="el-icon-plus" />
          </el-upload>
          <!-- 新增 -->
          <el-select v-if="element.componentName === 'SelectField'" v-model="element.props.defaultValue" :placeholder="element.props.placeholder">
            <el-option v-for="(item,index) in element.props.options" :key="index" :label="item.value" :value="item.value" />
          </el-select>
          <el-time-picker v-if="element.componentName === 'TimeSelectField'" v-model="element.props.defaultValue" :placeholder="element.props.placeholder" />
        </el-form-item>
      </div>

    </el-form>
  </div>
</template>

<script>
// import { number } from 'echarts/lib/export'
import './iconfont/iconfont.css'

export default {
  name: 'ApproveDesigner',
  //  props: ['widgetList','labelWidth'],
  props: {
    labelWidth: {
      type: Number,
      default: 100
    },
    widgetList: [Object, Array]
  },
  data() {
    return {
      // widgetList: [],
      IndexActive: 0,
      optionsDialog: false,
      isDrag: false,
      num: 0
    }
  },
  watch: {
    widgetList: {
      handler(newVal, oldVal) {
        this.$emit('changed', newVal)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  background: #fff !important;
}
::v-deep .el-checkbox {
  padding-right: inherit;
  border-right: inherit;
  margin: inherit;
  margin-right: 30px;
}
.Vghost {
  height: 2px;
  border-left: 2px solid #8bc349 !important;
  background: #8bc349 !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
  *,
  .el-form-item__label {
    display: none !important;
  }
}
.Vghost:hover {
  border-left: 2px solid #8bc349 !important;
}
.Vdrag {
  .delete {
    display: none;
  }
}
.designer {
  width: 100%;
  height: calc(100vh - 54px);
  background: #fff;
  padding: 50px;
  box-sizing: border-box;
  .el-form-item{
    float: left;
    width: 50%;
  }
}
.drag-content {
  min-height: 350px;
}
::v-deep .el-form{
    .el-select {
        width: 100%;
    }
}
</style>
